<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
	    <link rel="stylesheet" type="text/css" href="css/class_ys.css"/>
	   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>     
		<script src="js/xsdate.js"></script>
		
		<style>
			.seach_bor{
				width: 100%;
	    		height: 50px;	
	    		line-height:50px ;    	
	    		margin-bottom: 16px;
	    		vertical-align: middle;	    		
	    		background: linear-gradient(to top, #36BD7B, #47CE69);
	    		position: fixed;
	    		top: 0px;
	    		left: 0px;
			}
			
			.seachtxt{
				width: 94%;
				height: 50px;
				line-height: 50px;	
				margin: 0px auto;			
				position: relative;				
			}
			
			
						
			.seachtxt input{
				width: 92%;
				height: 40px;
				vertical-align: middle;
				outline: none;
				border: 0px;
				padding-left: 40px;
				border-radius: 5px;
				position: absolute;
				left: 0px;
				top: 5px;
				margin-left: 28px;
				box-sizing: border-box;	
				background: white url(img/sech.png) no-repeat 10px center;
				background-size: 22px;	
				font-size: 18px;		
			}
			
			.back_bg{
				display:inline-block;	    		
	    		vertical-align: middle;
	    		width: 11px;
	    		height: 28px;	    		
	    		background: url(img/back_icon.png) no-repeat;
	    		background-size:contain ;
	    		position: absolute;
	    		left: 0px;
	    		top:13px;
			}
			
			
			.icon_ss{
				display: inline-block;	
				width: 22px;
				height: 30px;			
				background: url(img/sech.png) no-repeat center center;
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 10px;
				margin-left: 10px;
				/*border: 1px solid red;*/
			/*	vertical-align: middle;*/
			}
			
			.cancle{
				color: white;
				display:inline-block;
				text-align: right;	
				height: 30px;
				line-height: 30px;			
				/*border: 1px solid blue;*/
				box-sizing: border-box;
				position: absolute;
				right: 0px;
				top: 10px;
				cursor: pointer;
			}


          .txt{  	
          	/*width: 60%;   */       	
          	margin: 0px auto;            
          	text-align: center;
          	vertical-align: middle;          	         
          }
          
          .txt p{
          	height: 30px;
          	line-height: 30px;
          }
          
           .txt p:first-child{
           	font-weight: 700;
           	font-size: 18px;
           	margin-bottom: 20px;
           	
           }
          
          /*底部样式*/
         .bottomBar{			
			width: 100%;
			height: 60px;
			padding-top: 10px;
			position: fixed;
			left: 0px;
			bottom: 0px;
			background: #fff;
			border-top: 1px solid #ccc;
			box-shadow:2px 2px 3px #cfcfcf;
			-moz-box-shadow:2px 2px 3px #cfcfcf;
			-webkit-box-shadow:2px 2px 3px #cfcfcf;
		}
		.bottomBar ul li{
			float: left;
			width: 25%;
			text-align: center;
			font-size: 14px;
		}
		.bottomBar ul li a{
			color: #666;
		}
		.bottomBar ul li a:hover{
			text-decoration: none;
		}
		.bottomBar li span{
			display: inline-block;
			width: 30px;
			height: 30px;	
					
		}
	
		.bottomBar li:nth-of-type(1) span{
			background: url(img/faxian2.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(2) span{
			background: url(img/fenshu.png) no-repeat  ;	
			background-size: contain;		
		}
		.bottomBar li:nth-of-type(3) span{
			background: url(img/sech2.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(4) span{
			background: url(img/wode.png) no-repeat;	
			background-size: contain;		
		}
		.p_color{
			color: #39C764;
		}
		
		.geterror{
			width: 100%;
			height: 100%;
			text-align: center;	
			display: none;	
			padding-top: 15%;	
		}
		
		</style>
	</head>
	<body>
		<div class="seach_bor">	
			<div class="seachtxt clearfix">
			<span class="back_bg fl"></span>
			<input type="text" id="ss" class="fl" placeholder="搜索：校园/武侠/言情/青春" />	
          		
			</div>
		</div>	
		
		
		<div class="txt" id="wh">
			<p>热门搜索</p>
			<p>诗里今生，梦里来世</p>
			<p>你好，我的粗茶淡饭</p>
			<p>元尊</p>
			<p>独步天下</p>
			<p>桃夭无双</p>
			<p>小幸运</p>
			<p>三重门</p>
			<p>余生只想和你虚度</p>
			<p>你配得上世上的一切美好</p>			
		</div>
		
		<div class="class_cnt">
			<div class="pic_txt clearfix" id="pro">
				<img src="img/book_def.png" class="fl pic"/>
				<div class="fr txt_s">
					<p class="bookname"></p>
					<p class="bookintrod"></p>
				    <p class="bookauthor"></p>
				</div>
			</div>
		</div>
		
		
		<div class="geterror">
			<img src='img/sorry.png' />
			<!--<p>未找到相关内容</p>-->
		</div>
		
		<!--底部导航-->
		<div class="bottomBar">
			<ul>
				<li><a href="#" onclick="location.href = 'index.html';return false;"><span class="clickStyles"></span><p>发现</p></a></li>
				<li><a href="#" onclick="location.href = 'class.html';return false;"><span></span><p>分类</p></a></li>
				<li><a href="#" onclick="location.href = 'seach.html';return false;"><span></span><p class="p_color">搜索</p></a></li>
				<li><a href="#" onclick="location.href = 'My.html';return false;"><span></span><p>我的</p></a></li>
			</ul>
		</div>
		<script>
		$(start);
		function start () {
			var wh=document.getElementById("wh");
			var w=document.documentElement.clientWidth;
			var h=document.documentElement.clientHeight;
			var tw=wh.clientWidth;
			var th=wh.clientHeight;	
			var a=w/2-tw/2;
			var b=h/2-th/2;
			console.log(th);
		    $(".txt").css("position","fixed").css("left",a+"px")
		    .css("top",b+"px");	    
		    
		    $(".back_bg").click(function() {
		    	history.back();
		    })
		    
		    
		    	 $(".geterror").hide();	
		    	 
		    $("#ss").focus(function() {			    	
		    	$(this).removeAttr("placeholder");	
		    	$(".pic_txt").css("display","none");		    	
		    })	    
		    	    
		    
		    $("#ss").blur(function() {		    	
		    	var keywords=["言情","武侠","校园","青春"];
		    	  
		    	for (var i=0;i<=keywords.length;i++) {		    		
		    		if ($("#ss").val()==keywords[i]) {
		    			$(".geterror").css("display","none");
		    			$(".txt").hide();		    			
		    			scont("js/seach_data"+i+".json"); 
		    			return;
		    		} 
		    		
		    		if ($("#ss").val()!=keywords[i]) {
		    		$(".geterror").show();		    		
		    		$(".txt").hide();
		    	} 		
		    	   	
		    			    	
		    	}
		    	    	
		    		    
		    	if ($("#ss").val().length==0) {
		    		$("#ss").attr("placeholder","搜索：校园/武侠/言情/青春");
		    		$(".geterror").hide();
		    		$(".txt").show();
		    	}	
		    	
		    })
		 
		}	
		        
		    
		</script>
	</body>
</html>
